<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>天嘉智能环卫系统</title>
    <style>
        * { margin: 0; padding: 0; }
        html { height: 100%; background: #fff url(../statics/img/backgroud.jpg) 100% 100% no-repeat; background-size: cover;}
        .dowebok { position: absolute; left: 45%; top: 41%; width: 600px; height: 480px; margin: -300px 0 0 -215px; border: 1px solid #fff;border-radius: 25px; background-color: rgba(0,0,0,.2);}
        .form-item { position: relative; width: 360px; margin: 0 auto; padding-bottom: 30px;}
        .form-item input { width: 288px; height: 48px; padding-left: 70px; border: 1px solid #fff; font-size: 18px; color: #fff; background-color: transparent; outline: none;}
        .form-item button {font-weight: 500;
    width: 360px;
    height: 50px;
    border: 0;
    border-radius: 25px;
    font-size: 18px;
    color: #1d3480;
    outline: none;
    cursor: pointer;
    background-color: #fff;
    margin-top: 30px;
}
        #username { background: url(../statics/img/user.png) 20px 10px no-repeat; }
        #password { background: url(../statics/img/password.png) 23px 11px no-repeat; }
        .tip { display: none; position: absolute; left: 20px; top: 56px; font-size: 14px; color: #f50; }
        .dowebok ::-webkit-input-placeholder { font-size: 18px; line-height: 1.4; color: #fff;}
        .dowebok :-moz-placeholder { font-size: 18px; line-height: 1.4; color: #fff;}
        .dowebok :-ms-input-placeholder { font-size: 18px; line-height: 1.4; color: #fff;}
		.dowebok >img.logo{width:85%;opacity:1; margin: 6%;}
		#code_input{width:178px;height: 50px; float:left; display:inline-block; border: 1px solid #fff; font-size: 18px; color: #fff; background-color: transparent; outline: none;padding-left: 10px;
		}
		#v_container{width:168px;height: 50px; float:left; display:inline-block; border: 1px solid #fff; font-size: 18px; color: #fff; background-color: transparent; outline: none;
		}
    </style>
</head>
<body>
    <div class="dowebok" id="tjapp">
        <img src="../statics/img/login.png" class="logo" />
        <div class="form-item">
            <input id="username" type="text" autocomplete="off" v-model="username" placeholder="登录名">
        </div>
        <div class="form-item">
            <input id="password" type="password" v-model="password" autocomplete="off" placeholder="密码">
        </div>
        <div class="form-item" >
          <div id="v_container" ><img alt="如果看不清楚，请单击图片刷新！" class="pointer" :src="src" @click="refreshCode"></div>
          <input type="text" id="code_input"  v-model="captcha" @keyup.enter="login" placeholder="请输入验证码"/>
            <p class="tip" :style="errorMsg!=null?'display: block':'display: none'">{{errorMsg}}</p>
        </div>
        <div class="form-item" ><button   @click="login">登 录</button></div>
    </div>

    <div style="color:white;font-size:100px;margin-top:35%;text-align:center;">天嘉智能智慧环卫管理系统</div>
    <script src="${request.contextPath}/statics/libs/jquery.min.js"></script>
    <script src="${request.contextPath}/statics/libs/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el:'#tjapp',
            data:{
                username: 'tiec',
                password: '123456',
                captcha: '',
                error: false,
                errorMsg: '',
                src: 'captcha.jpg'
            },
            beforeCreate: function(){
                if(self != top){
                    top.location.href = self.location.href;
                }
            },
            methods: {
                refreshCode: function(){
                    this.src = "captcha.jpg?t=" + $.now();
                },
                login: function (event) {
                    var data = "username="+vm.username+"&password="+vm.password+"&captcha="+vm.captcha;
                    $.ajax({
                        type: "POST",
                        url: "sys/login",
                        data: data,
                        dataType: "json",
                        success: function(result){
                            if(result.code == 0){//登录成功
                                parent.location.href =result.index;
                            }else{
                                vm.error = true;
                                vm.errorMsg = result.msg;
                                vm.refreshCode();
                            }
                        }
                    });
                }
            }
        });
    </script>
</body>
</html>
